<template>
    <div class="page" id="page">
        <header-view title="上传证件"></header-view>
        <div class="content">
            <form class="homeForm">
                <div class="hasBorder show1px"><label>姓名</label><input type="text" v-model="CifName" @blur="idPhotoUpload" placeholder="请输入姓名"/></div>
                <div class="show1px"><label>身份证</label><input type="text" v-model="IdNo" @blur="idPhotoUpload" placeholder="请输入身份证号"/></div>
                <div style="display: none;"><input type="text" id="remotePath" value="/testProject/{filemd5}{.suffix}" /></div>
                <div class="IDCard show1px">
                    <a id="fileTBg"><input type="file" id="fileT" @change="upload('fileT')" multiple name="file" /></a>
                    <a id="fileBBg"><input type="file" id="fileB" @change="upload('fileB')" multiple name="file" /></a>
                </div>
                <div class="show1px"><label>银行卡</label><input type="tel" v-model="TAcNo" placeholder="请输入银行卡号"></div>
                <div class="hasBorder show1px"><label>手机号</label><input type="tel" v-model="phone" placeholder="请输入手机号"/></div>
                <div class="qrCode show1px"><label>验证码</label><input type="tel" v-model="MessageCode" placeholder="验证码"/><a class="codeVal" @click="sendCode" :class="{activeColor:!isSendCode}"><b></b>{{timeTips}}</a></div>
                <div class="show1px"><label>密码</label><input type="password" id="SIPBox1" readonly placeholder="请输入密码"></div>
                <div class="show1px"><label>确认密码</label><input type="password" id="SIPBox2" readonly placeholder="请确认密码"></div>
                <span class="addWrap" v-show="showAddrInput" style="display: block">
                    <div class="show1px"><label>选择地址</label><input type="text" class="needArrowRight" :value="DistrictCodeDes" @click="showSelAddr=!showSelAddr" placeholder="请选择地址" readonly></div>
                    <div class="show1px"><label>详细地址</label><input type="text" v-model="Street" placeholder="请输入"></div>
                </span>
                <span class="oaccWrap" v-show="showOaccuInout" style="display: block;">
                    <div class="show1px"><label>选择职业</label><input type="text" :value="OccupationDes" class="needArrowRight" @click="showSelOaccu=!showSelOaccu" placeholder="请选择职业" readonly></div>
                    <div class="show1px" v-show="showOtherOaccu"><label>其他职业</label><input type="text" v-model="OccupationRemark" placeholder="请输入"></div>
                </span>
                <div class="show1px" v-show="showCompany"><label>工作单位</label><input type="text" v-model="Company" placeholder="请输入"></div>
            </form>
            <p class="arguments dots"><span @click="radio=!radio" :class="{active: radio}">已同意</span><a href="javascript:;" @click="showArgs=!showArgs">《中国民生银行个人人民币银行结算账户管理协议》</a></p>
            <a @click="commit" class="commitBtn" :class="{active: this.radio}">确认无误，立即上传</a>
        </div>
        <div class="argsList flex-container" v-show="showArgs">
            <div>
                <h3>民生注册相关协议<span @click="showArgs=!showArgs"></span></h3>
                <ul>
                    <li v-for="(item ,index) in args" class="show1px" @click="argsJump(index)">《{{item}}}》</li>
                </ul>
            </div>
        </div>
        <div class="uploadSuc flex-container" v-show="sucModal">
            <div>
                <img src="./../assets/icon/suc.png"/>
                <p>开户成功!</p>
                <a class="seeInfor" @click="$router.back()">查看信息</a>
                <a class="sucBack" @click="$router.back()">返回</a>
            </div>
        </div>
        <div class="keyboardMask" v-show="showPwdMask"></div>
        <div id="CompleteKeyboard"></div>
        <div id="NumberKeyboard"></div>
        <multistage-view v-show="showSelAddr" :dataList="addrList" @selectedBack="selectAddBack" name="AddrName"></multistage-view>
        <multistage-view v-show="showSelOaccu" :dataList="occupationList" @selectedBack="selectOaccuBack" name="Occupation"></multistage-view>
    </div>
</template>
<script>
    import HeaderView from './../components/header';
    import ButtonView from './../components/button';
    import multistageView from './../components/multistage';
    import utils from "../js/utils";
    export default {
        data(){
            return {
                args :['开户协议','中国民生银行易保业务服务协议','跨行通协议','中国民生银行个人人民陪银行结算账户管理协议'],
                showArgs: false,
                timeTips: '获取验证码',
                radio: false,
                sucModal: false,
                showPwdMask: false,   //密码遮罩
                CifName: '',          //姓名
                IdNo: '',             //身份证号
                IdPASide: '',         //身份证正面地址
                IdPBSide: '',         //身份证反面地址
                IdData: null,         //验证通过的数据存储
                occupationList: [],       //职业列表数据
                addrList:[],          //地址列表数据
                showSelAddr: false,  //显示选择地址弹框
                showSelOaccu: false, //显示选择职业弹框
                TAcNo: '',            //银行卡号
                phone: '',            //手机号
                MessageCode: '',      //验证码
                codeId: '',            //验证码id
                PwdResult: '',        //密码
                PwdResultConfirm: '',//确认密码
                boardData: {          //密码键盘数据
                    that: this,
                    inputs: ['SIPBox1' , 'SIPBox2'],
                    boardWrap: ['CompleteKeyboard' ,'NumberKeyboard'],
                    randomData: null
                },
                IdPNo: '',             //身份证验证凭证号
                Occupation: '',        //职业代码
                OccupationDes: '',     //职业描述
                OccupationRemark: '', //输入其他职业
                Company: '',           //工作单位
                DistrictCode: '',      //地址代码
                DistrictCodeDes: '',  //地址描述
                Street: ''             //详细地址
            }
        },
        components:{
            HeaderView,
            ButtonView,
            multistageView
        },
        computed:{
            /*
            * 验证码
            * */
            isSendCode:function(){
                return this.timeTips === '获取验证码' || this.timeTips === '重新获取验证码';
            },
            /*
            * 是否显示选择地址输入框
            * */
            showAddrInput(){
                return this.IdData && this.IdData.check.AddrFlag == 'Y';
            },
            /*
            * 是否显示选择职业输入框
            * */
            showOaccuInout(){
                return this.IdData && this.IdData.check.OccupationFlag == 'Y';
            },
            /*
            * 显示输入职业文本框
            * */
            showOtherOaccu(){
                return this.Occupation == '82';
            },
            /*
            * 显示工作单位
            * */
            showCompany(){
                return this.IdData && this.IdData.check.CompanyFlag == 'Y';
            }
        },
        mounted(){
            /*
            * 初始化键盘
            * */
            utils.initKeyBoard(this.boardData);
        },
        methods:{
            /*
           * 验证码姓名、身份证、身份证正面上传、身份证反面上传是否全部完成
           * */
            idPhotoUploadDone(){
                return this.CifName && this.IdNo && this.IdPASide && this.IdPBSide;
            },
            /*
           * 提交信息验证是否全部符合格式
           * */
            isCanCommit(){
                return utils.validate('noNull' , this.CifName , '姓名')
                    && utils.validate('idCard' , this.IdNo)
                    && utils.validate('noNull' , this.IdPASide ,'身份证正面照片')
                    && utils.validate('noNull' , this.IdPBSide ,'身份证反面照片')
                    && utils.validate('bankCard' , this.TAcNo)
                    && utils.validate('phone' , this.phone)
                    && utils.validate('code' , this.MessageCode)
            },
            /*
            * 选择地址后的回调
           * */
            selectAddBack(list , type){
                this.showSelAddr = false;
                if(type) return;
                let str = '' , that = this;
                list.forEach((item , index)=>{
                    str+= item.AddrName;
                    if(index == list.length - 1) that.DistrictCode = item.AddrCode;
                });
                that.DistrictCodeDes = str;
            },
            /*
            * 选择完职业回调
            * */
            selectOaccuBack(list , type){
                this.showSelOaccu = false;
                if(type) return;
                let str = '' , that = this;
                list.forEach((item , index)=>{
                    str+= item.Occupation;
                    if(index == list.length - 1){
                        that.Occupation = item.OctId;
                    }
                });
                that.OccupationDes = str;
            },
            /*
          * 联机身份证照片上传接口
          * */
            idPhotoUpload(){
                if(this.idPhotoUploadDone()){
                    let that = this;
                    utils.ajax({
                        url: utils.AJAX_SRC + 'Minsheng/idPhotoUpload',
                        params: {
                            CifName: that.CifName,
                            IdNo: that.IdNo,
                            IdPASide: that.IdPASide,
                            IdPBSide: that.IdPBSide
                        },
                        success(result){
                            if(result.errcode < 0){
                                utils.showTips(result.errmsg);
                                that.IdData = null;
                                return;
                            }
                            let data = result.data;
                            that.IdData = data;
                            let check = data.check;
                            if(check.AddrFlag == 'Y') that.addrListQry();
                            if(check.OccupationFlag == 'Y') that.occupationListQry();
                        }
                    });
                }
            },
            /*
            * 获取职业列表
            * */
            occupationListQry(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Minsheng/occupationListQry',
                    success(result){
                        if(result.errorCode < 0){
                            utils.showTips(result.errormsg);
                            return;
                        }
                        let data = result.data;
                        utils.hanMultistage(data);
                        data.forEach(item=>{
                            that.occupationList.push(item);
                        });
                    }
                });
            },
            /*
            * 获取地址列表
            * */
            addrListQry(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Minsheng/addrListQry',
                    success(result){
                        if(result.errorCode < 0){
                            utils.showTips(result.errormsg);
                            return;
                        }
                        utils.hanMultistage(result.data[0].child);
                        result.data[0].child.forEach(item=>{
                            that.addrList.push(item);
                        });
                    }
                });
            },
            /*
            * 身份证上传
            * */
            upload(ele){
                utils.upload(this , ele , (res)=>{
                    let src = utils.FILL + res.url;
                    let imgEle = document.getElementById(ele + 'Bg');
                    imgEle.style.backgroundImage  = 'url(' + src + ')';
                    imgEle.style.backgroundSize = 'auto 80%';
                    if(ele === 'fileT'){
                        this.IdPASide = utils.FILL + res.url;
                    }else{
                        this.IdPBSide = utils.FILL + res.url;
                    }
                    this.idPhotoUpload();
                });
            },
            /*
            * 获取验证码
            * */
            sendCode(){
                utils.sendCode(this , { phone: this.phone , TemplateId: 'C01'} , 'Minsheng/getMobileCode');
            },
            argsJump(type){
                this.$router.push({path:'/argument' , query:{ type:type }});
            },
            commit(){
                if(!this.radio) return;
                if(!this.isCanCommit()) return;
                let PwdResult = this['SIPBox1'].getEncryptedInputValue('SIPBox1');
                let PwdResultConfirm = this['SIPBox2'].getEncryptedInputValue('SIPBox2');
                if(PwdResult == '01031421@null' || PwdResultConfirm == '01031421@null'){
                    utils.showTips('密码只能设置6位哦!');
                    return;
                }
                if(this.showAddrInput && !utils.validate('noNull' , this.DistrictCodeDes , '地址')) return;
                if(this.showAddrInput && !utils.validate('noNull' , this.Street , '详细地址')) return;
                if(this.showOaccuInout && !utils.validate('noNull' , this.OccupationDes , '职业')) return;
                if(this.showOtherOaccu && !this.OccupationRemark){
                    utils.showTips('请输入职业!');
                    return;
                }
                if(this.showCompany && !utils.validate('noNull' , this.Company , '单位')) return;
                let params = {
                    CifName: this.CifName,
                    IdNo: this.IdNo,
                    IdPASide: this.IdPASide,
                    IdPBSide: this.IdPBSide,
                    IdPNo: this.IdData.idp.IdPNo,
                    TAcNo: this.TAcNo,
                    MobilePhone: this.phone,
                    MessageCode: this.MessageCode,
                    MessageTaskId: this.codeId,
                    Occupation: this.Occupation,
                    OccupationRemark: this.OccupationRemark,
                    Company: this.Company,
                    DistrictCode: this.DistrictCode,
                    Street: this.Street,
                    PwdResult: PwdResult,
                    PwdResultConfirm: PwdResultConfirm,
                    RandJnlNo: this.boardData.randomData.RandJnlNo,
                    Random: this.boardData.randomData.Random
                };
                let that = this;
                /*
                * 开户请求
                * */
                utils.ajax({
                    url: utils.AJAX_SRC + 'Minsheng/openAccount',
                    params: params,
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            that['SIPBox1'].clearInputValue();
                            that['SIPBox2'].clearInputValue();
                            that.boardData.randomData = null;
                            return;
                        }
                        utils.showTips(result.errmsg);
                        that.$router.replace({path: '/wallet'});
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .homeForm{background: #fff;padding: 0 0.75rem;margin-top: 0.5rem;}
    .homeForm div{display: flex;display: -webkit-flex;padding: 0.3rem 0;align-items: center;position: relative;}
    .homeForm label{color: #a5a7a9;width: 3.8rem;flex: none;}
    .homeForm label + input{flex: 1;height: 2rem;line-height: 2rem;padding: 0.3rem 0;color: #615f5e;font-size: 0.8rem;border: none;}
    .hasBorder{position: relative;}
    .homeForm::-webkit-input-placeholder{color: #999;}
    .homeForm .IDCard{justify-content: space-between;text-align: center;position: relative;padding: 0.6rem 0;}
    .IDCard > a{width: 48%;border: 1px dashed #00acfd;color: #615f5e;height: 4.8rem;position: relative;}
    .IDCard > a:first-child{background: url(./../assets/icon/camera-t.png) no-repeat center / 40% auto;}
    .IDCard > a:last-child{background: url(./../assets/icon/camera-b.png) no-repeat center / 40% auto;}
    .IDCard input{position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 99;opacity: 0;width: 100%;}
    .IDCard img{width: 30%;}
    .homeForm .qrCode{padding: 0;}
    .homeForm .qrCode input{flex: none;width: 46%;font-size: 0.75rem;}
    .homeForm input::-webkit-input-placeholder{color: #ccc;}
    .homeForm .qrCode a{height: 2.8rem;text-align: center;line-height: 2.8rem;color: #00acfd;flex: 1;position: relative;}
    .codeVal b{position: absolute;left: 0;top: 0.7rem;width: 1px;height: 1.4rem;background: #f1f1f1;}
    .commit{height: 2.4rem;line-height: 2.4rem;display: block;text-align: center;color: #fff;font-size: 0.8rem;background: #6FDDB1;}
    .arguments{background: #F5F4F9;padding: 0.7rem 0.75rem 1rem;font-size: 0.6rem;}
    .arguments span , .arguments a{display: inline-block;vertical-align: middle;color: #615f5e;}
    .arguments a{color: #00acfd;}
    .arguments span{width: 3rem;height: 2rem;line-height: 2rem;text-align: right;vertical-align: middle;background: url(./../assets/icon/radio.png) no-repeat left center / 1rem;display: inline-block;}
    .arguments span.active{background: url(./../assets/icon/radio-active.png) no-repeat left center / 1.15rem;}
    .argsList{position: fixed;bottom: 0;left: 0;right: 0;top: 0;z-index: 999;background: rgba(0,0,0,0.4);align-items: flex-end;}
    .argsList > div{width: 100%;}
    .argsList h3{color: #A7A7A7;background: #F5F4F9;line-height: 3rem;text-align: center;font-size: 0.85rem;}
    .argsList ul{background: #fff;text-align: center;}
    .argsList ul li{line-height: 2.6rem;position: relative;color: #A7A7A7;}
    .argsList li.active{color: #F6A279;}
    .argsList span{display: inline-block;float: right;width: 2rem;height: 2rem;margin: 0.5rem 1rem 0 0;background: url(./../assets/icon/close.png) no-repeat right center / 40%;}
    .uploadSuc{position: fixed;left: 0;bottom: 0;right: 0;top: 0;z-index: 999;background: rgba(0,0,0,0.4);justify-content: center;align-items: center;}
    .uploadSuc > div{background: #fff;width: 80%;border-radius: 0.3rem;text-align: center;}
    .uploadSuc img{margin: 0.5rem 0;width: 25%;}
    .uploadSuc p{font-size: 1rem;margin-bottom: 1.5rem;}
    .uploadSuc a{display: block;line-height: 1.6rem;color: #fff;border-radius: 0.2rem;margin: 0 auto;width: 60%;margin-bottom: 1rem;}
    .uploadSuc a.seeInfor{background: #0BC886;}
    .uploadSuc a.sucBack{background: #F6A279;margin-bottom: 2rem;}
    .needArrowRight{background: url('./../assets/icon/arrow-right.svg') no-repeat right center / 0.8rem;padding-right: 1rem !important;}
    .commitBtn{height: 2.4rem;line-height: 2.4rem;display: block;text-align: center;color: #fff;font-size: 0.8rem;background: #ccc;}
    .commitBtn.active{background: linear-gradient(to right,#7a84ff 46%,#1f75fc);}
    .keyboardMask{position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 999;background: rgba(0,0,0,0.5);}
</style>
